<template>
  <div class="volunteer-dashboard">
    <h2>志愿者主页</h2>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>我参与的活动</span>
            </div>
          </template>
          <div class="card-content">
            <h3>{{ statistics.joinedCount }}</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>我负责的活动</span>
            </div>
          </template>
          <div class="card-content">
            <h3>{{ statistics.ledCount }}</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>平均考核分数</span>
            </div>
          </template>
          <div class="card-content">
            <h3>{{ statistics.averageScore }}</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="recent-activities" style="margin-top: 20px">
      <template #header>
        <div class="card-header">
          <span>最近活动记录</span>
        </div>
      </template>
      <el-table :data="recentActivities">
        <el-table-column prop="activityId" label="活动编号" width="100" />
        <el-table-column prop="title" label="活动标题" />
        <el-table-column prop="startTime" label="开始时间" width="180" />
        <el-table-column prop="score" label="考核分数" width="100" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getUserStats } from '@/api/user'

export default {
  data() {
    return {
      statistics: {
        joinedCount: 0,
        ledCount: 0,
        averageScore: 0
      },
      recentActivities: []
    }
  },
  created() {
    this.fetchStats()
  },
  methods: {
    async fetchStats() {
      try {
        const userId = this.$store.state.user.id
        const data = await getUserStats(userId)
        this.statistics = data.statistics
        this.recentActivities = data.recentActivities
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  }
}
</script>

<style scoped>
.dashboard-card {
  height: 150px;
}
.card-content {
  text-align: center;
  font-size: 24px;
}
</style> 